<template>
  <div @click.stop>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    button?: ('left' | 'right' | 'both')
  }>(),
  {
    button: 'both'
  }
)

const emits = defineEmits<{
  (e: 'clickOutside', event: MouseEvent): void
}>()
function clickOutside(event: MouseEvent) {
  emits('clickOutside', event)
}

onMounted(() => {
  window.addEventListener('click', clickOutside)
  window.addEventListener('contextmenu', clickOutside)
})
onUnmounted(() => {
  window.removeEventListener('click', clickOutside)
  window.removeEventListener('contextmenu', clickOutside)
})
</script>